<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<title>华人钻充值页面</title>
<link href="__CSS__style.css" type="text/css" rel="stylesheet">
<script src="__JS__jquery-1.9.1.min.js" type="text/javascript"></script>
</head>

<body style="background-color: #f6f5fb;">
<div class="w">
  <div class="user-property">
    <!--<p class="for-phone">手机号：<i>18234044571</i></p>-->
    <p class="for-diamonds">华人钻 <i>{$drillnum}</i></p>
  </div>
  <div class="recharge">
    <div class="recharge-title">
      <span>充值华人钻数量</span>
    </div>
    <ul class="recharge-type clearfix">
      <li>
        <i>100</i>
        <b value="10">10元</b>
        <em></em>
      </li>
      <li>
        <i>200</i>
        <b value="20">20元</b>
        <em></em>
      </li>
      <li>
        <i>300</i>
        <b value="30">30元</b>
        <em></em>
      </li>
      <li>
        <i>500</i>
        <b value="50">50元</b>
        <em></em>
      </li>
      <li>
        <i>800</i>
        <b value="80">80元</b>
        <em></em>
      </li>
      <li>
        <i>1000</i>
        <b value="100">100元</b>
        <em></em>
      </li>
    </ul>
    <div class="cmoney">自定义华人钻：<input name="cmoney" type="tel" placeholder="自定义华人钻数量" class="diamonds-in"></div>
    <div class="pay-by">
      <i>支付方式</i>
      <b>微信支付<em class="di"></em></b>
      <p>应付 <span class="paymoney">10</span> 元</p>
    </div>
  </div>
  <div class="recharge-footer">
    <a class="qd">确定支付</a>
    <a href="http://shop.hrtv.cn/" class="shop-re">商城获钻</a>
  </div>
</div>
<form id="formorder" name="formorder" action="{:U('/Home/Pay/swopdrill')}" method="post">
  <input type="hidden" name="url" value="{:C('WEBDOMAIN')}{:U('liveitem',array('liveID'=>$liveinfo['id']))}">
  <input type="hidden" name="money">
  <input type="hidden" name="liveid" value="{$liveinfo['id']}">
  <input type="hidden" name="bodystr" value="{$liveinfo['live_name']}">
</form>

<script type="text/javascript">
$(document).ready(function($) {
      var moneyfirst = $(".recharge-type li:first").find('i').html();
      $(".recharge-type li:first").find('em').addClass('ci');
      $(".recharge-type li:first").attr('v',moneyfirst);
      $(".paymoney").html(moneyfirst/10);

      $(".recharge-type li").each(function(index, element) {
        var t = $(this);
        t.click(function(){
          var v = $(this).find('i').html();
          $(".paymoney").html(v/10);
          t.attr('v',v).siblings().removeAttr('v');
          $(this).find('em').addClass('ci').parent().siblings().find('em').removeClass('ci');
          $("input[name='cmoney']").val(null);
        })
      });


      $("input[name='cmoney']").focus(function(){
          $(".paymoney").html(0);
		  $(".recharge-type li").each(function(index, element) {
          	$(this).find('em').removeClass('ci');
            $(this).removeAttr('v');
          });
      })

      $("input[name='cmoney']").keyup(function(){
        var thisV = $(this).val();
        $(".paymoney").html(thisV/10);
      })
  /*确定支付*/
  $("a.qd").click(function(){
    var cmoney1 = '';
    var cmoney = $("input[name='cmoney']").val();
    $(".recharge-type li").each(function(index, element) {
      var v = $(this).attr('v');
      if(v!=null && v!='undefined'){
        cmoney1 = v;
      }
    });
    if(cmoney1!=''){
       var num = cmoney1;
    }else if(cmoney!='' && !isNaN(cmoney)){
      var num = parseInt(cmoney);
    }else{
      var num = '';
    }
    if(num!='' && num>=1){
        //alert(num/10);
        $("input[name='money']").val(num/10);
        $('form#formorder').submit();
    }else{
      alert('华人钻数量至少为1个');
      $("input[name='cmoney']").val('');
      $("input[name='cmoney']").focus();
    }


  })

});
</script>
</body>
</html>
